<template>
    <div :style="{width:setW +'px'}" class="wl_list">
        <slot name="query"></slot>
        <slot name="operator"></slot>
        <slot name="table"></slot>
        <el-pagination v-if="!hidePage" background 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            :current-page="listData.curr_page" 
            :page-sizes="[15, 30, 100]" 
            :page-size="listData.page_size" 
            layout="total, prev, pager, next, sizes, jumper" 
            :total="listData.total_size">
        </el-pagination>
    </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Object,
      default: () => {
        return {};
      }
    },

    hidePage: {
      type: Boolean,
      default: false
    },
    setW: String
  },
  methods: {
    handleSizeChange(size) {
      this.listData.page_size = size;
      this.$emit("sizeChange", size);
    },
    handleCurrentChange(page) {
      this.listData.curr_page = page;
      this.$emit("pageChange", page);
    }
  }
};
</script>


<style>
body .wl-dialog .wl_list {
  background-color: #fff;
  padding: 10px 15px;
}
</style>
